<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>DPL: 通知与提示</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl.css">
<link rel="stylesheet" href="/skin/frontend/uemall_v2/mobile/css/dpl/dpl-demo.css">
</head>

<body class="cmWrapper dpl-widget-notice">
<article class="cmPage">
	<header class="cmPageNavBar">
		<h1>通知与提示</h1>
		<div class="cmBtnWrapper cmRight">
			<a class="cmBtn" href="javascript:location.reload();">刷新</a>
		</div>
		<div class="cmBtnWrapper cmLeft">
			<a class="cmBtn cmBack" href="../"><b>DPL</b></a>
		</div>
	</header>
	<section class="content">
		<h2>站点通知</h2>
		<p>提供弹出和关闭站点通知的 API。</p>
		<p>每个页面只可弹出一个站点通知。即，在弹出之前应检测是否已有其它通知正在显示；如果页面已有一个通知，则弹出操作无效。</p>
	</section>
	<section class="demo">
		<header>
			<h1>网站页头</h1>
		</header>
	</section>
	<section class="act">
		<div class="cmBtnLine">
			<div class="cmBtnWrapper">
				<a class="cmBtn" href="#show-notice" data-action>弹出站点通知</a>
			</div>
			<div class="cmBtnWrapper">
				<a class="cmBtn" href="#hide-notice" data-action>关闭</a>
			</div>
		</div>
	</section>
	<section class="content">
		<h2>API</h2>
		<p>弹出： <code>DPL.siteNotice.show(oCfg);</code></p>

<pre><code>oCfg = {
	html: '<.../>',
	actionClose: '#xxx',
	hideCloseBtn: b,
	id: '',
	type: 'info'  //'error', 'notice', 'warning', 'tip'...
};</code></pre>

		<p>关闭： <code>DPL.siteNotice.hide();</code></p>
		<p>检测是否显示： <code>DPL.siteNotice.isShown</code></p>
	</section>
	<hr>
	<section class="tip-box">
		<h2>气泡提示</h2>
		<div class="cmTipBox cmUpArrow">
			<i class="cmTipBoxArrow"></i>
			<i class="cmTipBoxBtnClose"><a href="#" data-action><i class="cmIcon cmX20 close">X</i></a></i>
			<header><h3>商品搜索</h3></header>
			<div class="cmTipBoxInner">
				<ul class="guest cmList cmLarge cmRightArrow">
					<li>
						<a href="#">注册</a>
					</li>
					<li>
						<a href="#">登录</a>
					</li>
				</ul>
			</div>
		</div>
	</section>
	<section class="act">
		<a class="cmBtn" href="#switch-arrow-dir" data-action>切换箭头方向</a>
	</section>
	<hr>
	<section class="list-with-action">
		<h2>列表的操作弹出框</h2>
		<ul class="cmList cmHasDetail" data-action-list="#action-list">
			<li>
				<a href="#">列表项</a>
				<a href="/"></a>
			</li>
			<li>
				<a href="#">列表项</a>
				<a href="/">a</a>
			</li>
			<li>
				<a href="#">列表项</a>
				<a href="/">a</a>
			</li>
		</ul>
		<ul class="cmList cmHasDetail" data-action-list="#action-list-2">
			<li>
				<a href="#">列表项</a>
				<a href="/"></a>
			</li>
			<li>
				<a href="#">列表项</a>
				<a href="/"></a>
			</li>
			<li>
				<a href="#">列表项</a>
				<a href="/">a</a>
			</li>
		</ul>
		<ul class="cmList cmHasDetail" data-action-list="#action-list-2">
			<li>
				<a href="#">列表项</a>
				<a href="/"></a>
			</li>
			<li>
				<a href="#">列表项</a>
				<a href="/"></a>
			</li>
			<li>
				<a href="#">列表项</a>
				<a href="/">a</a>
			</li>
		</ul>
		<div class="cmTipBox cmActionList cmDownArrow hidden" id="action-list">
			<i class="cmTipBoxArrow"></i>
			<div class="cmTipBoxInner">
				<div class="cmBtnLine cmLeft">
					<a href="#" class="cmBtn cmSmall" data-action>动作</a>
					<a href="#" class="cmBtn cmSmall" data-action>动作</a>
					<a href="#" class="cmBtn cmSmall" data-action>动作</a>
				</div>
				<a href="/" class="cmBtn cmSmall cmRightArrow cmRight cmSmoothJump">详情</a>
			</div>
		</div>
		<div class="cmTipBox cmActionList cmDownArrow hidden" id="action-list-2">
			<i class="cmTipBoxArrow"></i>
			<div class="cmTipBoxInner normal" data-status="1">
				<div class="cmBtnLine cmLeft">
					<a href="#" class="cmBtn cmSmall" data-action>删除</a>
					<a href="#" class="cmBtn cmSmall" data-action>收藏</a>
					<a href="#mod-qty" class="cmBtn cmSmall" data-action>修改数量</a>
				</div>
				<a href="/" class="cmBtn cmSmall cmRightArrow cmRight cmSmoothJump">详情</a>
			</div>
			<div class="cmTipBoxInner mod-qty" data-status="2">
				<div class="cmBtnCombo cmLeft">
					<a href="#" class="cmBtn cmSmall" data-action>动作</a>
					<input type="text" class="text" name="username" id="in_t_">
					<a href="#" class="cmBtn cmSmall" data-action>动作</a>
				</div>
				<a href="#mod-qty-ok" class="cmBtn cmSmall cmRight" data-action>确定</a>
			</div>
		</div>
		<div class="cmTipBox cmActionList cmDownArrow hidden" id="cart-action-list">
			<i class="cmTipBoxArrow"></i>
			<div class="cmTipBoxInner">
				<div class="cmBtnLine">
					<a href="#delete-cart-item" class="cmBtn cmLeft cmDangerous" data-action>删除</a>
					<a href="/" class="cmBtn cmRightArrow cmRight cmSmoothJump">商品详情</a>
				</div>
			</div>
		</div>

	</section>
	<hr>
	<section class="act">
		<a class="cmBtn" href="javascript:location.reload();">刷新</a>
	</section>
	<hr>
	<footer>
		<address>&copy; UEFED.COM</address>
	</footer>
</article>
<script src="/js/mv1/lib/lib.js"></script>
<script src="/js/mv1/lib/dpl.js"></script>
<script>_.ext.ini(); DPL.ini(); _.ga.ini();</script>
<script src="/js/mv1/dpl/dpl-demo.js"></script>
<script>DPL.demo.notice.ini();</script>
</body>
</html>
